{extend name="Public:content"}
{block name="content"}
<form class="form-horizontal m-t" id="addMenuFrom"  method="post" action="{:url('admin/menu/add')}">
    <div class="form-group">
        <label class="col-sm-2 control-label">上级菜单：</label>
        <div class="col-sm-8">
            <select name='pid' class='form-control m-b'>
                <!--{foreach $menus as $menu}-->
                <!--{eq name='menu.id' value='$vo.pid|default=0'}-->
                <option selected value='{$menu.id}'>{$menu.spl}{$menu.title}</option>
                <!--{else}-->
                <option value='{$menu.id}'>{$menu.spl}{$menu.title}</option>
                <!--{/eq}-->
                <!--{/foreach}-->
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">菜单名称：</label>
        <div class="col-sm-8">
            <input type="text" name="title" value='{$vo.title|default=""}' rangelength="[2,200]" required="true" placeholder="请输入菜单名称" title="请输入菜单名称" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">菜单链接：</label>
        <div class="col-sm-8">
            <input type="text" onblur="(this.value === '') && (this.value = '#')" name="url" value='{$vo.url|default="#"}' autocomplete="off" required="required" placeholder="请输入菜单链接" title="请输入菜单链接" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">菜单图标：</label>
        <div class="col-sm-4">
            <input placeholder="请输入或选择图标" onchange="$('#icon-preview').get(0).className = this.value" type="text" id="icon" name="icon" value='{$vo.icon|default=""}' class="form-control">
        </div>
        <div class="col-sm-2" style="width:38px;height: 34px;border: 1px solid #e5e6e7;padding: 9px 10px 4px;margin-right: 15px;">
            <span id="icon-preview" style="font-size:1.2em" class='{$vo.icon|default=""}'></span>
        </div>
        <button type='button' class='btn btn-primary' onclick="menu_form.icon()">选择图标</button>
    </div>
    <div class="hr-line-dashed"></div>
    <div class="form-group">
        <div class="col-sm-12 text-center">
            {if isset($vo['id'])}<input type='hidden' value='{$vo.id}' name='id'/>{/if}
            <button class="btn-sm btn-primary" type="submit">保存数据</button>
            <button class="btn-sm btn-primary btn-danger" type='button' data-confirm="确定要取消编辑吗？" onclick="$.Oa.confirm(this)">取消编辑</button>
        </div>
    </div>
</form>
{/block}
{block name="script"}
<script type="text/javascript">
    window.menu_form = {
        icon: function(){ //显示图标
            parent.layer.open({
                type: 2,
                title: '图标选择',
                shadeClose: false,
                shade: 0.8,
                maxmin: false, //开启最大化最小化按钮
                area: ['960px', '650px'],
                content: '{:url("admin/plugs/icon")}?field=icon&iframe='+window.name,
                yes: function (index, layero) {}
            });
        }
    }
    //表单提交
    $('#addMenuFrom').validate({
        submitHandler: function(form) {
            $.Oa.doHform('#addMenuFrom',false,false,function(data){
                parent.layer.msg(data.msg);
                var iframe ='{$iframe}';
                var n = parent.$("iframe[name='"+iframe+"']").index();
                parent[n].location.reload();
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            })
        }
    })
</script>
{/block}
